<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <script>
        function move(fromId,toId){
            let fromChild = document.getElementById(fromId);
            let toChild = document.getElementById(toId);

            // 遍历fromChild中所有的选项
            for(let i = fromChild.length-1; i >= 0; i--){
                let op = fromChild.options[i];
                // 如果当前迭代到的选项处于选中状态
                if(op.selected){
                    // 则移动到toChild
                    toChild[toChild.length] = op;
                }
            }
        }
        function moveAll(fromId,toId){
            let fromChild = document.getElementById(fromId);
            let toChild = document.getElementById(toId);

            // 遍历fromChild中所有的选项
            for(let i = fromChild.length-1; i >= 0; i--){
                let op = fromChild.options[i];
                toChild[toChild.length] = op;
            }
        }
    </script>
</head>
<body>
<table>
    <tr>
        <td>
            <select id="s1" multiple="multiple" style="width: 100px;height: 150px;">
                <option>李白</option>
                <option>孙尚香</option>
                <option>吕布</option>
                <option>貂蝉</option>
                <option>蔡文姬</option>
            </select>
        </td>
        <td>
            <!--
                将选中的选项移动到另一个下拉列
                当前下拉列中消失,在另一个下拉列中显示
            -->
            <input type="button" value="&nbsp;-->" onclick="move('s1','s2')"><br>
            <!--
                将当前下拉列中所有选项全部移动到另一个下拉列
            -->
            <input type="button" value="->>" onclick="moveAll('s1','s2')"><br>
            <input type="button" value="<--&nbsp;" onclick="move('s2','s1')"><br>
            <input type="button" value="<<-" onclick="moveAll('s2','s1')"><br>
        </td>
        <td>
            <select id="s2" multiple="multiple" style="width: 100px;height: 150px;">
            </select>
        </td>
    </tr>
</table>
</body>
</html>